<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/animate.css"/>
    <link rel="stylesheet" href="./css/font-awesome.min.css"/>
    <link rel="stylesheet" href="./css/flexslider.css"/>
    <link rel="stylesheet" href="./css/base.css"/>
</head>
<body>

<!-- header 顶部 -->
<header>
    <a href="./"><img src="./images/logo.png" alt=""/>淘划算 - 未来商店</a>
    <span class="right">
        <form>
            <input type="text" class="headInput" placeholder="输入商品名称"/><input type="button" class="headBtn" value="搜索"/>
        </form>
    </span>
</header>


<div class="road">
    <a href="javascript:history.back(-1)"><i class="fa fa-angle-left"></i></a>
    购物车
    <hr/>
</div>

<div class="fliterWrap">
    <div class="panel">
        <div class="panel-heading">
            <div class="row">
                <div class="col-sm-6">商品</div>
                <div class="col-sm-2">数量</div>
                <div class="col-sm-2">价格</div>
                <div class="col-sm-2"></div>
            </div>
        </div>
        <div class="panel-body">
            <article class="shopItem row">
                <div class="col-sm-6">
                    <a href="#">
                        <div class="pull-left">
                            <img src="./images/pic1.jpg" alt="限量/单件包邮 格子背心连衣裙" class="shopItemImg"/>
                        </div>
                        <div class="shopAttr">
                            <h3>限量/单件包邮 格子背心连衣裙</h3>
                            <span>颜色分类：绿色</span>
                            <span>尺寸大小：s码</span>
                        </div>
                    </a>
                </div>
                <div class="col-sm-2">
                    <div class="shopNumber">
                        <a href="javascript:;" class="btn-minus">-</a>
                        <span class="number">1</span>
                        <a href="javascript:;" class="btn-add">+</a>
                    </div>
                </div>

                <div class="col-sm-2">
                    <p class="price">￥<b>32</b></p>
                </div>

                <div class="col-sm-2">
                    <a href="javascript:;" class="deleteShop"><i class="fa fa-trash-o"></i></a>
                </div>
            </article>

            <article class="shopItem row">
                <div class="col-sm-6">
                    <a href="#">
                        <div class="pull-left">
                            <img src="./images/pic1.jpg" alt="限量/单件包邮 格子背心连衣裙" class="shopItemImg"/>
                        </div>
                        <div class="shopAttr">
                            <h3>限量/单件包邮 格子背心连衣裙</h3>
                            <span>颜色分类：绿色</span>
                            <span>尺寸大小：s码</span>
                        </div>
                    </a>
                </div>
                <div class="col-sm-2">
                    <div class="shopNumber">
                        <a href="javascript:;" class="btn-minus">-</a>
                        <span class="number">1</span>
                        <a href="javascript:;" class="btn-add">+</a>
                    </div>
                </div>

                <div class="col-sm-2">
                    <p class="price">￥<b>32</b></p>
                </div>

                <div class="col-sm-2">
                    <a href="javascript:;" class="deleteShop"><i class="fa fa-trash-o"></i></a>
                </div>
            </article>

            <article class="shopItem row">
                <div class="col-sm-6">
                    <a href="#">
                        <div class="pull-left">
                            <img src="./images/pic1.jpg" alt="限量/单件包邮 格子背心连衣裙" class="shopItemImg"/>
                        </div>
                        <div class="shopAttr">
                            <h3>限量/单件包邮 格子背心连衣裙</h3>
                            <span>颜色分类：绿色</span>
                            <span>尺寸大小：s码</span>
                        </div>
                    </a>
                </div>
                <div class="col-sm-2">
                    <div class="shopNumber">
                        <a href="javascript:;" class="btn-minus">-</a>
                        <span class="number">1</span>
                        <a href="javascript:;" class="btn-add">+</a>
                    </div>
                </div>

                <div class="col-sm-2">
                    <p class="price">￥<b>32</b></p>
                </div>

                <div class="col-sm-2">
                    <a href="javascript:;" class="deleteShop"><i class="fa fa-trash-o"></i></a>
                </div>
            </article>

            <article class="shopItem row">
                <div class="col-sm-6">
                    <a href="#">
                        <div class="pull-left">
                            <img src="./images/pic1.jpg" alt="限量/单件包邮 格子背心连衣裙" class="shopItemImg"/>
                        </div>
                        <div class="shopAttr">
                            <h3>限量/单件包邮 格子背心连衣裙</h3>
                            <span>颜色分类：绿色</span>
                            <span>尺寸大小：s码</span>
                        </div>
                    </a>
                </div>
                <div class="col-sm-2">
                    <div class="shopNumber">
                        <a href="javascript:;" class="btn-minus">-</a>
                        <span class="number">1</span>
                        <a href="javascript:;" class="btn-add">+</a>
                    </div>
                </div>

                <div class="col-sm-2">
                    <p class="price">￥<b>32</b></p>
                </div>

                <div class="col-sm-2">
                    <a href="javascript:;" class="deleteShop"><i class="fa fa-trash-o"></i></a>
                </div>
            </article>

        </div>

        <div class="panel-footer">
            <p class="shopCount"><span><i class="fa fa-shopping-cart"></i>商品总数：<b>4</b>件</span>
                <span>商品总价：<em>￥128.00</em>元</span></p>
            <a href="javascript:showModal();" class="btnOrder">去结算</a>

        </div>

    </div>

</div>

<div class="modal animated bounceIn">
    <div class="modal_header">订单结算<a href="#" class="closeModal"><i class="fa fa-times-circle"></i></a> </div>
    <div class="modal_body">
        <p class="textColor textLg">恭喜您，订单已生成！</p>
        <p class="w300"><i class="fa fa-tag textColor"></i> <span>订单号：</span>1243546454</p>
        <p class="w300"><i class="fa fa-money textColor"></i> <span>金额：</span><b class="textColor fontThin textLg">￥869.60</b></p>
    </div>
    <div class="modal_footer">
        <a href="#" class="btnPay">好的，我现在去收银台</a>
    </div>

</div>
<div class="backMasker"></div>

<style>
    body {
        background: #f3f1f4;
    }
</style>
<script src="./js/jquery.min.js"></script>
<script>
    //商品数量
    function changeCount() {
        var c = 0;
        $.each($(".shopItem"), function () {
            c += parseInt($(this).find(".number").text());
        })
        $(".shopCount span b").text(c);
    }

    //商品总价格
    function changePrices() {
        var p = 0;
        $.each($(".shopItem"), function () {
            p += parseInt($(this).find(".number").text()) * parseInt($(this).find(".price b").text());
        })
        $(".shopCount span em").text("￥" + p);
    }

    //弹出确认
    function showModal(){
        $(".modal").addClass("bounceIn").show();
        $(".backMasker").show();
    }

    $(function () {
        //点加号
        $(".btn-add").click(function () {
            var n = parseInt($(this).parent().find(".number").text());
            $(this).parent().find(".number").text(n + 1);
            changeCount();
            changePrices();
        });

        //点减号
        $(".btn-minus").click(function () {
            var n = parseInt($(this).parent().find(".number").text());
            if (n > 1) {
                $(this).parent().find(".number").text(n - 1);
                changeCount();
                changePrices();
            }
        })


        //删除
        $(".deleteShop").click(function(){
            $(this).parents(".shopItem").remove();
            changeCount();
            changePrices();
        })

        //关闭窗口
        $(".closeModal").click(function(){
            $(this).parents(".modal").removeClass("bounceIn").addClass("bounceOut");
            setTimeout(function(){
                $(".backMasker").hide();
                $(".modal").hide().removeClass("bounceOut");
            },500)
        })


    });
</script>
</body>
</html>